import React from 'react';
import {Layout, Avatar, Dropdown, Card, Icon} from 'antd';
const {Header} = Layout;

export default props => (
    <Header className="flex just-end" style={{background: '#fff', padding: '0 15px'}}>
        {props.children}
        <Dropdown
            trigger={['hover']}
            className="cursor"
            placement="bottomRight"
            overlay={
                <div className="cursor">
                    <Card bodyStyle={{padding: '10px'}}>
                        <ul className="flex-col ui-mb-0">
                            <li className="ui-p-10">
                                <Icon type="setting" />
                                <span className="ui-pl-5">个人设置</span>
                            </li>
                            <li className="ui-p-5 ui-pb-15">
                                <Icon type="github" />
                                <span className="ui-pl-5">仓库地址</span>
                            </li>
                            <li className="ui-p-5 ui-pt-10" style={{borderTop: '1px solid #ddd'}}>
                                <Icon type="logout" />
                                <span className="ui-pl-5">注销登录</span>
                            </li>
                        </ul>
                    </Card>
                </div>
            }
        >
            <section>
                <Avatar style={{backgroundColor: '#1890ff', marginRight: '8px'}} icon="user" size="small" />
                {props.global.userName || 'admin'}
            </section>
        </Dropdown>
    </Header>
);
